import React, {PureComponent} from "react";
import {actionCreator} from "./store";
import {connect} from "react-redux";


class NavComponent extends PureComponent {

    constructor(props) {
        super(props);
        this.clickToView = this.clickToView.bind(this);
        this.clickToOtherWebSite = this.clickToOtherWebSite.bind(this);
    }

    render() {

        return (
            <div style={navWrapperStyle}>
                {/*左边的提示栏*/}
                <ul style={tipsUlStyle}>

                    {
                        this.props.navData.map((item, index) => {
                            return (
                                <li
                                    style={tipsLiStyle}
                                    key={index}
                                    onClick={() => {
                                        this.clickToView(index);
                                    }}>
                                    {item.get("name")}
                                </li>
                            );
                        })
                    }

                </ul>

                {/*右边的的具体栏*/}
                <ul style={tipsContentStyle}>

                    {
                        this.props.navData.map((item, index) => {

                            return (
                                <li key={item.get("cid")} id={index}>
                                    <dl style={tipsContentDlStyle}>
                                        <dt style={tipsContentdtStyle}>{item.get("name")}</dt>
                                        {
                                            item.get("articles").map((ddItem, index) => {

                                                return (
                                                    <dd
                                                        style={tipsContentddStyle}
                                                        key={ddItem.get("id")}
                                                        onClick={() => {
                                                            this.clickToOtherWebSite(ddItem.get("link"))
                                                        }}
                                                    >
                                                        {ddItem.get("title")}

                                                    </dd>
                                                );
                                            })
                                        }

                                    </dl>
                                </li>
                            );
                        })
                    }

                </ul>
            </div>
        );
    }

    componentDidMount() {
        if (this.props.navData.size === 0) {
            this.props.requestNavData();
        }
    };


    clickToView = (id) => {
        if (id) {
            const element = document.getElementById(id);
            if (element) {
                element.scrollIntoView({behavior: "smooth",});
            }
        }
    };

    clickToOtherWebSite = (url) => {
        window.open(url, "_blank");
    };
}

const mapState = (state) => {
    return {
        navData: state.getIn(["navReducer", "navDataList"]),

    }
};

const dispatchState = (dispatch) => {
    return {
        requestNavData() {
            const action = actionCreator.requestNavData();
            dispatch(action);
        }
    }
};
export default connect(mapState, dispatchState)(NavComponent);

const navWrapperStyle = {
    width: 1200,
    margin: "0 auto",
    backgroundColor: "#fff",
    marginTop: 30,
    overflow: "hidden",
};


const tipsUlStyle = {
    float: "left",
    borderTop: "solid 1px #dbe2e8",
    borderLeft: "solid 1px #dbe2e8",
    borderRight: "solid 1px #dbe2e8",
    width: 100,
    marginLeft: 82,
    marginTop: 20,

};

const tipsLiStyle = {
    color: "#333",
    height: 30,
    textAlign: "center",
    lineHeight: "30px",
    fontSize: 13,
    borderBottom: "solid 1px #dbe2e8",
    cursor: "pointer",

};

const tipsContentStyle = {
    float: "left",
    marginLeft: 72,

};

const tipsContentDlStyle = {
    border: "solid 1px #dbe2e8",
    overflow: "hidden",
    width: 910,
    paddingTop: 20,
    marginTop: 20,
    marginBottom: 20,
    paddingBottom: 10,
};

const tipsContentdtStyle = {
    color: "#e64c3b",
    fontSize: 16,
    marginBottom: 10,
    marginLeft: 20,
};

const tipsContentddStyle = {
    float: "left",
    fontSize: 14,
    width: 180,
    textAlign: "center",
    margin: "10px 0",
    cursor: "pointer",
    color: "#3482df",
};

